<template>
  <div>

  <el-dialog :title='FunctionName' :visible="dialogFormVisible" :before-close="cancel"  width="600">
    <el-form :model="form" :rules='rules' ref="ruleForm" label-width="220px">
      <el-form-item label="活动名称"  prop="name">
        <el-input v-model="form.name" style="width:70%;" ></el-input>
      </el-form-item>
      <el-form-item label="权限分配">
        <!-- 分页组件 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          show-checkbox
          accordion
          node-key="id"
         :default-expanded-keys="defaultS"
         ref=tree
        ></el-tree>
        <!-- 分页组件 -->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="add(form.id)">确定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
\
<script>
import { list } from '@/api/base/menus.js'
import { add, detail, update } from '@/api/base/permissions.js'
export default {
  name: 'usersAdd',
  data () {
    return {
      defaultS: [1],
      form: {
        name: '',
        id: NaN
      },
      dataS: [],
      data: [{
        id: 1,
        title: '系统菜单和页面权限点',
        childs: this.dataS
      }],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      defaultProps: {
        children: 'childs',
        label: 'title'
      }
    }
  },
  props: {
    FunctionName: {
      type: String,
      // required: true
      default: '弹框'
    },
    dialogFormVisible: {
      default: true
    }
  },
  created () {
    this.listS()
  },
  methods: {
    // 获取树形结构
    async listS () {
      const { data } = await list()
      this.deepChange(data, 'childs')
      this.data[0].childs = data
      // console.log(this.dataS)
      console.log(this.data)
    },
    // 修改数组
    deepChange (arr, chilren) {
      arr.forEach(t => {
        for (const key in t) {
          if (Array.isArray(t[key])) {
            if (key !== chilren) {
              t[chilren] = t[key]
            }
            this.deepChange(t[chilren], chilren)
          }
        }
      })
    },
    // 取消
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.$emit('update:dialogFormVisible', false)
      this.$refs.tree.setCheckedKeys([])
      this.listS()
    },
    // 新增
    async add (id) {
      if (id) {
        // 编辑
        console.log('编辑')
        const list = this.$refs.tree.getCheckedKeys()
        const data = await update({
          id: id,
          title: this.form.name,
          permissions: list
        })
        console.log(data)
      } else {
        console.log('新增')
        // const list = this.$refs.tree.getCheckedNodes() 获取单项
        const list = this.$refs.tree.getCheckedKeys()
        // console.log(list)
        // console.log(this.form.name)
        const addS = await add({
          title: this.form.name,
          permissions: list
        })
        console.log(addS)
      }
      // 清空校验
      this.$refs.ruleForm.resetFields()
      this.$emit('update:dialogFormVisible', false)
      // 清空
      this.$refs.tree.setCheckedKeys([])
      this.form.id = NaN
      this.listS()
      console.log(this.defaultS)
      // 刷新
      this.$parent.list()
    },
    // 编辑
    async edit (id) {
      console.log()
      const res = await detail({ id: id })
      // console.log(res)
      this.form.id = id
      this.form.name = res.data.title
      this.$refs.tree.setCheckedKeys(res.data.permissions)
    }

  }
}
</script>

<style>
</style>
